@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            统计报表
            <small>数据分析与统计</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#">报表分析</a></li>
            <li class="active">统计报表</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#purchase-detail" data-toggle="tab" onclick="showPurchaseDetail()">进货明细表</a></li>
                          <li><a href="#purchase-return-detail" data-toggle="tab" onclick="showPurchaseReturnDetail()">进退货明细表</a></li>
                        <li><a href="#sale-detail" data-toggle="tab" onclick="showSaleDetail()">销货明细表</a></li>
                        <li><a href="#sale-return-detail" data-toggle="tab" onclick="showSaleReturnDetail()">销退货明细表</a></li>
                        <li><a href="#goods-profit" data-toggle="tab" onclick="showGoodsProfit()">商品利润表</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- 进货明细表 -->
                        <div class="tab-pane active" id="purchase-detail">
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="pdStartDate">开始日期：</label>
                                            <input type="date" class="form-control" id="pdStartDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="pdEndDate">结束日期：</label>
                                            <input type="date" class="form-control" id="pdEndDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="pdGoodsName">商品名称：</label>
                                            <input type="text" class="form-control" id="pdGoodsName" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="pdPartnerName">供应商：</label>
                                            <input type="text" class="form-control" id="pdPartnerName" placeholder="请输入供应商名称">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="searchPurchaseDetail()">
                                            <i class="fa fa-search"></i> 查询
                                        </button>
                                        <button type="button" class="btn btn-success" onclick="exportPurchaseDetail()">
                                            <i class="fa fa-download"></i> 导出
                                        </button>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div id="purchase-detail-table" class="avue-crud" ref="purchaseDetailCrud">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 进退货明细表 -->
                        <div class="tab-pane" id="purchase-return-detail">
                            <div class="box-body">
                                <!-- 进退货明细表搜索条件 -->
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="prdStartDate">开始日期：</label>
                                            <input type="date" class="form-control" id="prdStartDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="prdEndDate">结束日期：</label>
                                            <input type="date" class="form-control" id="prdEndDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="prdGoodsName">商品名称：</label>
                                            <input type="text" class="form-control" id="prdGoodsName" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="prdPartnerName">供应商：</label>
                                            <input type="text" class="form-control" id="prdPartnerName" placeholder="请输入供应商名称">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="searchPurchaseReturnDetail()">
                                            <i class="fa fa-search"></i> 查询
                                        </button>
                                        <button type="button" class="btn btn-success" onclick="exportPurchaseReturnDetail()">
                                            <i class="fa fa-download"></i> 导出
                                        </button>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div id="purchase-return-detail-table" class="avue-crud" ref="purchaseReturnDetailCrud">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 销货明细表 -->
                        <div class="tab-pane" id="sale-detail">
                            <div class="box-body">
                                <!-- 销货明细表搜索条件 -->
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="sdStartDate">开始日期：</label>
                                            <input type="date" class="form-control" id="sdStartDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="sdEndDate">结束日期：</label>
                                            <input type="date" class="form-control" id="sdEndDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="sdGoodsName">商品名称：</label>
                                            <input type="text" class="form-control" id="sdGoodsName" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="sdPartnerName">客户：</label>
                                            <input type="text" class="form-control" id="sdPartnerName" placeholder="请输入客户名称">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="searchSaleDetail()">
                                            <i class="fa fa-search"></i> 查询
                                        </button>
                                        <button type="button" class="btn btn-success" onclick="exportSaleDetail()">
                                            <i class="fa fa-download"></i> 导出
                                        </button>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div id="sale-detail-table" class="avue-crud" ref="saleDetailCrud">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 销退货明细表 -->
                        <div class="tab-pane" id="sale-return-detail">
                            <div class="box-body">
                                <!-- 销退货明细表搜索条件 -->
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="srdStartDate">开始日期：</label>
                                            <input type="date" class="form-control" id="srdStartDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="srdEndDate">结束日期：</label>
                                            <input type="date" class="form-control" id="srdEndDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="srdGoodsName">商品名称：</label>
                                            <input type="text" class="form-control" id="srdGoodsName" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="srdPartnerName">客户：</label>
                                            <input type="text" class="form-control" id="srdPartnerName" placeholder="请输入客户名称">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="searchSaleReturnDetail()">
                                            <i class="fa fa-search"></i> 查询
                                        </button>
                                        <button type="button" class="btn btn-success" onclick="exportSaleReturnDetail()">
                                            <i class="fa fa-download"></i> 导出
                                        </button>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div id="sale-return-detail-table" class="avue-crud" ref="saleReturnDetailCrud">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 商品利润表 -->
                        <div class="tab-pane" id="goods-profit">
                            <div class="box-body">
                                <!-- 商品利润表搜索条件 -->
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gpStartDate">开始日期：</label>
                                            <input type="date" class="form-control" id="gpStartDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gpEndDate">结束日期：</label>
                                            <input type="date" class="form-control" id="gpEndDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gpGoodsName">商品名称：</label>
                                            <input type="text" class="form-control" id="gpGoodsName" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="searchGoodsProfit()">
                                            <i class="fa fa-search"></i> 查询
                                        </button>
                                        <button type="button" class="btn btn-success" onclick="exportGoodsProfit()">
                                            <i class="fa fa-download"></i> 导出
                                        </button>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-12">
                                        <div id="goods-profit-table" class="avue-crud" ref="goodsProfitCrud">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<script>
    var vm = new Vue({
        el: '#purchase-detail-table',
        data: function () {
            return {
                // 进货明细表配置
                purchaseDetailOptions: {
                    url: '/JxReport/GetPurchaseDetailReport',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: false,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    column: [
                        { label: '单据类型', prop: 'BillType' },
                        { label: '业务单号', prop: 'BillNo' },
                        { label: '单据日期', prop: 'BillDate' },
                        { label: '供应商', prop: 'PartnerName' },
                        { label: '商品编码', prop: 'GoodsCode' },
                        { label: '商品名称', prop: 'GoodsName' },
                        { label: '规格型号', prop: 'SpecModel' },
                        { label: '单位', prop: 'Unit' },
                        { label: '数量', prop: 'Quantity' },
                        { label: '单价', prop: 'Price' },
                        { label: '金额', prop: 'Amount' }
                    ]
                },
                // 进退货明细表配置
                purchaseReturnDetailOptions: {
                    url: '/JxReport/GetPurchaseReturnDetailReport',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: false,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    column: [
                        { label: '单据类型', prop: 'BillType' },
                        { label: '业务单号', prop: 'BillNo' },
                        { label: '单据日期', prop: 'BillDate' },
                        { label: '供应商', prop: 'PartnerName' },
                        { label: '商品编码', prop: 'GoodsCode' },
                        { label: '商品名称', prop: 'GoodsName' },
                        { label: '规格型号', prop: 'SpecModel' },
                        { label: '单位', prop: 'Unit' },
                        { label: '数量', prop: 'Quantity' },
                        { label: '单价', prop: 'Price' },
                        { label: '金额', prop: 'Amount' }
                    ]
                },
                // 销货明细表配置
                saleDetailOptions: {
                    url: '/JxReport/GetSaleDetailReport',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: false,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    column: [
                        { label: '单据类型', prop: 'BillType' },
                        { label: '业务单号', prop: 'BillNo' },
                        { label: '单据日期', prop: 'BillDate' },
                        { label: '客户', prop: 'PartnerName' },
                        { label: '商品编码', prop: 'GoodsCode' },
                        { label: '商品名称', prop: 'GoodsName' },
                        { label: '规格型号', prop: 'SpecModel' },
                        { label: '单位', prop: 'Unit' },
                        { label: '数量', prop: 'Quantity' },
                        { label: '单价', prop: 'Price' },
                        { label: '金额', prop: 'Amount' }
                    ]
                },
                // 销退货明细表配置
                saleReturnDetailOptions: {
                    url: '/JxReport/GetSaleReturnDetailReport',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: false,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    column: [
                        { label: '单据类型', prop: 'BillType' },
                        { label: '业务单号', prop: 'BillNo' },
                        { label: '单据日期', prop: 'BillDate' },
                        { label: '客户', prop: 'PartnerName' },
                        { label: '商品编码', prop: 'GoodsCode' },
                        { label: '商品名称', prop: 'GoodsName' },
                        { label: '规格型号', prop: 'SpecModel' },
                        { label: '单位', prop: 'Unit' },
                        { label: '数量', prop: 'Quantity' },
                        { label: '单价', prop: 'Price' },
                        { label: '金额', prop: 'Amount' }
                    ]
                },
                // 商品利润表配置
                goodsProfitOptions: {
                    url: '/JxReport/GetGoodsProfitReport',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: false,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    column: [
                        { label: '商品编码', prop: 'GoodsCode' },
                        { label: '商品名称', prop: 'GoodsName' },
                        { label: '规格型号', prop: 'SpecModel' },
                        { label: '单位', prop: 'Unit' },
                        { label: '销售数量', prop: 'SaleQuantity' },
                        { label: '销售金额', prop: 'SaleAmount' },
                        { label: '成本金额', prop: 'CostAmount' },
                        { label: '利润', prop: 'Profit' },
                        { label: '利润率(%)', prop: 'ProfitRate' }
                    ]
                }
            }
        },
        methods: {
            // 显示进货明细表
            showPurchaseDetail: function () {
                // 初始化进货明细表
                new Vue({
                    el: '#purchase-detail-table',
                    data: { options: this.purchaseDetailOptions }
                });
            },
            // 显示进退货明细表
            showPurchaseReturnDetail: function () {
                // 初始化进退货明细表
                new Vue({
                    el: '#purchase-return-detail-table',
                    data: { options: this.purchaseReturnDetailOptions }
                });
            },
            // 显示销货明细表
            showSaleDetail: function () {
                // 初始化销货明细表
                new Vue({
                    el: '#sale-detail-table',
                    data: { options: this.saleDetailOptions }
                });
            },
            // 显示销退货明细表
            showSaleReturnDetail: function () {
                // 初始化销退货明细表
                new Vue({
                    el: '#sale-return-detail-table',
                    data: { options: this.saleReturnDetailOptions }
                });
            },
            // 显示商品利润表
            showGoodsProfit: function () {
                // 初始化商品利润表
                new Vue({
                    el: '#goods-profit-table',
                    data: { options: this.goodsProfitOptions }
                });
            },
            // 搜索进货明细表
            searchPurchaseDetail: function () {
                var params = this.getSearchParams('pd');
                this.purchaseDetailOptions.url = '/JxReport/GetPurchaseDetailReport?' + this.encodeQuery(params);
                this.$nextTick(function () {
                    this.$refs.purchaseDetailCrud.refresh();
                });
            },
            // 搜索进退货明细表
            searchPurchaseReturnDetail: function () {
                var params = this.getSearchParams('prd');
                this.purchaseReturnDetailOptions.url = '/JxReport/GetPurchaseReturnDetailReport?' + this.encodeQuery(params);
                this.$nextTick(function () {
                    this.$refs.purchaseReturnDetailCrud.refresh();
                });
            },
            // 搜索销货明细表
            searchSaleDetail: function () {
                var params = this.getSearchParams('sd');
                this.saleDetailOptions.url = '/JxReport/GetSaleDetailReport?' + this.encodeQuery(params);
                this.$nextTick(function () {
                    this.$refs.saleDetailCrud.refresh();
                });
            },
            // 搜索销退货明细表
            searchSaleReturnDetail: function () {
                var params = this.getSearchParams('srd');
                this.saleReturnDetailOptions.url = '/JxReport/GetSaleReturnDetailReport?' + this.encodeQuery(params);
                this.$nextTick(function () {
                    this.$refs.saleReturnDetailCrud.refresh();
                });
            },
            // 搜索商品利润表
            searchGoodsProfit: function () {
                var params = {
                    startDate: document.getElementById('gpStartDate').value,
                    endDate: document.getElementById('gpEndDate').value,
                    goodsName: document.getElementById('gpGoodsName').value
                };
                this.goodsProfitOptions.url = '/JxReport/GetGoodsProfitReport?' + this.encodeQuery(params);
                this.$nextTick(function () {
                    this.$refs.goodsProfitCrud.refresh();
                });
            },
            // 导出进货明细表
            exportPurchaseDetail: function () {
                var params = this.getSearchParams('pd');
                window.location.href = '/JxReport/ExportPurchaseDetailReport?' + this.encodeQuery(params);
            },
            // 导出进退货明细表
            exportPurchaseReturnDetail: function () {
                var params = this.getSearchParams('prd');
                window.location.href = '/JxReport/ExportPurchaseReturnDetailReport?' + this.encodeQuery(params);
            },
            // 导出销货明细表
            exportSaleDetail: function () {
                var params = this.getSearchParams('sd');
                window.location.href = '/JxReport/ExportSaleDetailReport?' + this.encodeQuery(params);
            },
            // 导出销退货明细表
            exportSaleReturnDetail: function () {
                var params = this.getSearchParams('srd');
                window.location.href = '/JxReport/ExportSaleReturnDetailReport?' + this.encodeQuery(params);
            },
            // 导出商品利润表
            exportGoodsProfit: function () {
                var params = {
                    startDate: document.getElementById('gpStartDate').value,
                    endDate: document.getElementById('gpEndDate').value,
                    goodsName: document.getElementById('gpGoodsName').value
                };
                window.location.href = '/JxReport/ExportGoodsProfitReport?' + this.encodeQuery(params);
            },
            // 获取搜索参数
            getSearchParams: function (prefix) {
                return {
                    startDate: document.getElementById(prefix + 'StartDate').value,
                    endDate: document.getElementById(prefix + 'EndDate').value,
                    goodsName: document.getElementById(prefix + 'GoodsName').value,
                    partnerName: document.getElementById(prefix + 'PartnerName').value
                };
            },
            // 将对象转换为URL查询字符串
            encodeQuery: function (data) {
                return Object.keys(data)
                    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
                    .join('&');
            }
        },
        mounted: function () {
            // 组件挂载后执行，初始化第一个报表
            this.showPurchaseDetail();
        }
    });
</script>